<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix MenuButton</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="../define/MenuSeparator.js"></script>
    <script type="module" src="../define/MenuItem.js"></script>
    <script type="module" src="../define/MenuButton.js"></script>
  </head>

  <body role="main">
    <div class="demo medium padded">
      <elix-menu-button id="sampleMenuButton" aria-label="Sample Menu">
        <elix-menu-item>New Tab</elix-menu-item>
        <elix-menu-item>New Window</elix-menu-item>
        <elix-menu-separator></elix-menu-separator>
        <elix-menu-item>History</elix-menu-item>
        <elix-menu-item>Downloads</elix-menu-item>
        <elix-menu-item>Bookmarks</elix-menu-item>
        <elix-menu-separator></elix-menu-separator>
        <elix-menu-item>Zoom</elix-menu-item>
        <elix-menu-item>Settings</elix-menu-item>
      </elix-menu-button>
      <p id="result" role="alert"></p>
      <script>
        sampleMenuButton.addEventListener("close", (event) => {
          const closeResult = event.detail.closeResult;
          const selectedItem =
            !closeResult || closeResult.canceled ? null : closeResult;
          result.textContent = selectedItem
            ? `You picked: ${selectedItem.textContent}`
            : `You didn't pick a menu item.`;
        });
      </script>
    </div>
  </body>
</html>
